<!-- 教练---详情 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getSpListApi
	} from '@/api/coach.js'
	import {
		useLongLatStore
	} from '@/stores/index'
	// 经纬度
	const longLatStore = useLongLatStore()
	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		swiperCurrent: 0,
		swiperList: [1, 2, 3, 4, 5]
	})

	// const shuju = ref({
	// 	spId: '',
	// 	longitude: '',
	// 	latitude: '',
	// 	showPic: ''
	// })

	const venueDetails = ref({
		serviceTime: '',
		ordCount: '',
		spDesc: '',
		serviceTime: '',
		showPic: ''
	})
	const spId = ref()
	onLoad((option) => {
		console.log(option, 'option');
		// venueDetails.value = JSON.parse(option.item)
		spId.value = option.spId
		getvenueDetails()

		console.log('venueDetails.value ================', venueDetails.value);
		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
		// this.getList()
	})



	const getvenueDetails = async () => {
		const {
			data
		} = await getSpListApi({
			spId: spId.value,
			latitude: longLatStore.info.latitude,
			longitude: longLatStore.info.longitude,
		})
		data.showPic = data.showPic.split(",")
		data.tagLabel = data.tagLabel.split("|")
		venueDetails.value = data
		console.log('venueDetails.value=====-------', venueDetails.value);
		console.log('data:===== ', data);
	}




	// 返回上一页
	const back = () => {
		uni.navigateBack()
	}

	// 点击立即预约
	const bookNowClick = () => {
		uni.navigateTo({
			url: `/subPackage/coach/submit?venueDetails=${JSON.stringify(venueDetails.value)}`
		})
	}
</script>

<template>
	<view class="coach-detail-page">
		<view class="navber" :style="{ 'height': data.navHeight + 'px', 'margin-top': data.barHeight + 'px' }">
			<u-icon class="back" color="#FFFFFF" name="arrow-left" @click="back"></u-icon>
			<text>教练详情</text>
		</view>
		<!-- 头部 -->
		<view class="head">
			<!-- 轮播 -->
			<swiper class="swiper-box" :current="data.swiperCurrent" circular :autoplay="false" :interval="3000"
				@change="e => data.swiperCurrent = e.detail.current">
				<swiper-item class="item" v-for="item in data.swiperList" :key="item">
					<view>
						<image style="height: 520rpx; width: 750rpx;" :src="venueDetails.spAvatar" mode="scaleToFill" />
					</view>
				</swiper-item>
			</swiper>
			<!-- 控制 -->
			<view class="control-box">
				<text class="current">{{ data.swiperCurrent + 1 }}</text>
				<text class="num">{{ '/' + data.swiperList.length }}</text>
			</view>
		</view>
		<!-- 教练信息 -->
		<view class="info-box">
			<view class="left" style="overflow: hidden;">
				<image style="height: 150rpx; width: 150rpx;" :src="venueDetails.spAvatar" mode="scaleToFill" />
			</view>
			<view class="right">
				<view class="top">
					<view class="name-box">
						<text class="name">{{venueDetails.spName}}</text>
						<text class="tag">{{ venueDetails.spLevel==='1' ? '金牌教练':'银牌教练'}}</text>
					</view>
					<view class="right">
						<image src="/static/images/coach/icon_address.png" mode="widthFix" />
						<text>{{venueDetails.distanceLabel}}</text>
					</view>
				</view>
				<view class="rate">

					<uni-rate :size="24" :value="venueDetails.score" :max="5" allowHalf readonly color="transparent"
						activeColor="#FFB13B" />
					<text>{{venueDetails.score}}</text>
				</view>
				<view class="label-box">
					<text v-for="item in venueDetails.tagLabel">{{item}}</text>
					<!-- <text>增肌减脂</text>
					<text>功能训练</text>
					<text>体态调整</text> -->
				</view>
			</view>
		</view>
		<!-- 服务 -->
		<view class="service-box">
			<view class="item">
				<text class="key">独享1对1</text>
				<view class="value">
					<view>
						<text>￥199</text>
					</view>
					<text>/次</text>
				</view>
			</view>

			<view class="item">
				<text class="key">服务时长</text>
				<view class="value">
					<view>
						<text>{{venueDetails.serviceTime}}</text>
					</view>
					<text>/次</text>
				</view>
			</view>
			<view class="item">
				<text class="key">累计服务</text>
				<view class="value">
					<view>
						<text>{{venueDetails.ordCount}}</text>
					</view>
					<text>/次</text>
				</view>
			</view>

			<view class="item">
				<text class="key">工作年限</text>
				<view class="value">
					<view>
						<text>8</text>
					</view>
					<text>年</text>
				</view>
			</view>
		</view>
		<!-- 承诺 -->
		<view class="promise-box">
			<view class="item">
				<image src="/static/images/icons/promise_icon1.png" mode="scaleToFill" />
				<text>不满意包退</text>
			</view>
			<view class="item">
				<image src="/static/images/icons/promise_icon2.png" mode="scaleToFill" />
				<text>过期退</text>
			</view>
			<view class="item">
				<image src="/static/images/icons/promise_icon3.png" mode="scaleToFill" />
				<text>按次约</text>
			</view>
			<view class="item">
				<image src="/static/images/icons/promise_icon4.png" mode="scaleToFill" />
				<text>超优惠</text>
			</view>
		</view>
		<!-- 概况 -->
		<view class="survey-box">
			<view class="title">
				<text>教练概况</text>
			</view>
			<view class="content">
				<text>
					{{venueDetails.spDesc}}

				</text>
			</view>
		</view>
		<!-- 荣誉 -->
		<view class="honor-box">
			<view class="title">
				<text>认证荣誉</text>
			</view>
			<scroll-view class="honor-list" scroll-x enable-flex>
				<view class="item" v-for="item in venueDetails.certList" :key="item">
					<view class="image">
						<image :src="item.certPic" style="width: 100rpx; height: 140rpx;" mode="aspectFill" />
					</view>
					<text>{{item.certDesc}}</text>
				</view>
			</scroll-view>
		</view>


		<!-- 评价 -->
		<view class="evaluate-box">
			<view class="top">
				<view class="title">
					<text>用户评价</text>
				</view>
				<view class="more">
					<text>查看全部</text>
					<u-icon name="arrow-right" color="#838385"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item, index) in qryEvalList" :key="item.evalId">
					<!-- 头部 -->
					<view class="head-box">
						<up-avatar :src="item.userAvatar"></up-avatar>
						<view class="info">
							<view class="name">
								<text>{{ item.userName }}</text>

								<up-rate v-model="item.score" size="12" :allowHalf="true" inactiveIcon="star-fill"
									inactiveColor="#D9D9D9" activeColor="#FFB13B" readonly></up-rate>

							</view>
							<view class="time">{{ item.createTime }}</view>
						</view>

					</view>
					<!-- 评价文字 -->
					<view class="cnt">
						<text>{{ item.comment }}</text>
					</view>
					<view>
						<!-- 图片列表 -->
						<view class="picList">
							<view v-for="(src, index) in qryEvalList.fileList" :key="index" class="pic-item">
								<u-image :src="src" width="148rpx" height="148rpx" mode="aspectFill" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 风采 -->
		<view class="elegance-box">
			<view class="title">
				<text>教练风采</text>
			</view>
			<view class="content">
				<view class="item" v-for="(item,idx) in venueDetails.showPic" :key="idx">
					<image :src="item" mode="scaleToFill" />
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btns-box" @click="bookNowClick">
			<view class="btn">
				<text>立即预约</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.coach-detail-page {
		padding-bottom: 216rpx;
		background-color: #F6F6F6;
		min-height: 100vh;

		// 顶部导航栏
		& .navber {
			position: absolute;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100vw;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #FFFFFF;
			text-align: center;

			&::v-deep .u-icon {
				position: absolute;
				left: 24rpx;
				font-size: 40rpx;

			}
		}

		// 头部-轮播
		& .head {
			position: relative;

			& .swiper-box {
				height: 500rpx;
				text-align: center;

				& .item {
					height: 500rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					// background-color: red;
				}
			}

			& .control-box {
				position: absolute;
				bottom: 24rpx;
				right: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #8A8C92;
				line-height: 28rpx;
				text-align: right;

				& .current {
					color: #fff;
				}
			}
		}

		// 教练信息
		& .info-box {

			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			&>.left {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
				border: 4rpx solid #fff;
				box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.15);
			}

			&>.right {
				width: 526rpx;

				& .top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 4rpx;

					& .name-box {
						display: flex;
						align-items: center;

						& .name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #303133;
							line-height: 33rpx;
						}

						& .tag {
							margin-left: 12rpx;
							display: inline-block;
							width: 93rpx;
							height: 28rpx;
							line-height: 28rpx;
							text-align: center;
							background: linear-gradient(125deg, #303133 0%, #00EE0B 100%);
							font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
							border-radius: 0rpx 12rpx 12rpx 12rpx;
						}
					}

					& .right {
						display: flex;
						align-items: center;

						& image {
							width: 25rpx;
							height: 25rpx;
						}

						& text {
							margin-left: 4rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #838385;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}

				& .rate {
					display: flex;
					align-items: center;
					margin-top: 12rpx;

					&::v-deep .uni-rate {
						& .uni-icons {
							font-size: 24rpx !important;
							margin-right: 6rpx;
						}
					}

					& text {
						margin-left: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #303133;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				& .label-box {
					display: flex;
					align-items: center;

					margin-top: 8rpx;

					& text {
						margin-right: 12rpx;
						display: inline-block;
						padding: 4rpx 12rpx;
						background: #F2F2F2;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #838385;
						line-height: 23rpx;
						text-align: center;
					}
				}
			}
		}

		// 服务内容
		& .service-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 32rpx;
			margin-top: 20rpx;
			padding: 32rpx 10rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .item {
				position: relative;
				width: 168rpx;
				text-align: center;

				&:not(:last-child)::after {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 0rpx;
					height: 88rpx;
					border: 2rpx solid #D9D9D9;
					opacity: 0.4;
				}

				& .key {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #303133;
					line-height: 30rpx;
				}

				& .value {
					margin-top: 16rpx;

					&>view {
						display: inline-block;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						line-height: 42rpx;
						background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}

					&>text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #838385;
						line-height: 23rpx;
					}
				}
			}
		}

		// 承诺
		& .promise-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 32rpx;
			margin-top: 20rpx;
			padding: 28rpx 4rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .item {
				position: relative;
				display: flex;
				align-items: center;
				padding: 0 28rpx;

				&:not(:last-child)::after {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 0rpx;
					height: 32rpx;
					border: 2rpx solid #D9D9D9;
					opacity: 0.4;
				}

				& image {
					width: 32rpx;
					height: 32rpx;
					font-size: 0;
				}

				& text {
					margin-left: 4rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #303133;
					line-height: 23rpx;
				}
			}
		}

		// 概况
		& .survey-box {
			margin: 0 32rpx;
			margin-top: 20rpx;
			padding: 28rpx 30rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #303133;
				line-height: 38rpx;
			}

			& .content {
				margin-top: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #838385;
				line-height: 40rpx;
			}
		}

		// 荣誉
		& .honor-box {
			margin: 0 32rpx;
			margin-top: 20rpx;
			padding: 28rpx 0rpx;
			padding-right: 0rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .title {
				margin-left: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #303133;
				line-height: 38rpx;
			}

			& .honor-list {
				white-space: nowrap;

				& .item {
					display: inline-block;
					margin-left: 24rpx;
					width: 164rpx;
					height: 228rpx;
					text-align: center;

					&:first-child {
						margin-left: 32rpx;
					}

					& .image {
						padding: 14rpx 6rpx;
						width: 164rpx;
						height: 164rpx;

						& image {
							width: 100%;
						}
					}

					& text {
						display: inline-block;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #838385;
						line-height: 30rpx;
						white-space: pre-wrap;
					}
				}
			}
		}




		// 评价
		.evaluate-box {
			margin: 20rpx 32rpx 0;
			padding: 28rpx 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				& .title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
				}

				& .more {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #838385;

					& text {
						margin-right: 4rpx;
					}
				}
			}

			& .list {
				margin-top: 32rpx;

				& .item {
					padding-top: 24rpx;

					&:first-child {
						padding-top: 0rpx;
					}

					&:not(:last-child):after {
						margin-top: 24rpx;
						content: '';
						display: block;
						border: 2rpx solid;
						opacity: 0.5;
						border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
					}

					& .head-box {
						display: flex;
						align-items: center;

						& .info {
							// margin-left: 12rpx;

							& .name {
								display: flex;
								align-items: center;

								& text {
									margin-right: 14rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #303133;
								}
							}

							& .time {
								margin-top: 6rpx;
								font-weight: 400;
								font-size: 20rpx;
								color: #838385;
							}
						}
					}

					& .cnt {
						margin-top: 24rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #303133;
					}

					& .picList {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 16rpx;

						& .pic-item {
							border-radius: 8rpx;
							overflow: hidden;
						}
					}
				}
			}
		}



		// 风采
		& .elegance-box {

			margin: 0 32rpx;
			margin-top: 20rpx;
			padding: 28rpx 30rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			& .title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #303133;
				line-height: 38rpx;
			}

			& .content {
				margin-top: 24rpx;

				& .item {
					width: 622rpx;
					min-height: 400rpx;

					& image {
						width: 622rpx;
						// height: auto;
					}
				}
			}
		}

		// 按钮
		& .btns-box {
			position: fixed;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			bottom: 0;
			left: 0;
			padding: 0 36rpx;
			padding-top: 12rpx;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border: 1rpx solid #E9E9EB;

			& .btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 88rpx;
				width: 620rpx;
				color: #FFFFFF;
				background: #303133;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 38rpx;
				text-align: center;
				border-radius: 112rpx;

			}
		}
	}
</style>